<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<th:block th:include="include :: wxheader('完善信息')" />
		<!--<title>完善信息</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.min.css">-->

		<link rel="stylesheet" th:href="@{/lib/jquery-weui/dist/css/jquery-weui.min.css}" type="text/css" href="lib/jquery-weui/dist/css/jquery-weui.min.css">
		<link rel="stylesheet" th:href="@{/lib/jquery-weui/dist/lib/weui.min.css}" type="text/css" href="lib/jquery-weui/dist/lib/weui.min.css">
		<link rel="stylesheet" th:href="@{/css/deliver.css}" href="css/deliver.css" />

		<!--	<link rel="stylesheet" type="text/css" href="css/deliver.css">
		<link rel="stylesheet" type="text/css" href="lib/jquery-weui/dist/css/jquery-weui.min.css">
		<link rel="stylesheet" type="text/css" href="lib/jquery-weui/dist/lib/weui.min.css">-->
	</head>

	<body>

		<div class="bg">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">真伪验证</h1>
				<a th:href="@{/wx/index}" class="mui-icon mui-icon-home mui-pull-right"></a>
			</header>

			<div class="mui-content">
				<div id="header">
					<div class="all" th:if="${giftCard!=null}">
						<div class="tu01"><img th:src="${giftCard.imgUrl}"></div>
						<div class="text">
							<p class="b16" th:text="${giftCard.productName}">精美大礼包【演示】</p>
							<p class="gray" th:utext="${giftCard.descn}">商品内容：</p>
						</div>
					</div>
				</div>

				<div id="content">
					<p class="redcenter">完善预约信息</p>
					<form class="mui-input-group" id="dataForm">
						<input type="hidden" name="giftCardId" th:value="${giftCard.giftCardId}">
						<input type="hidden" name="shopId" th:value="${shop.shopId}">
						<div class="mui-input-row">
							<label>预约人姓名：</label>
							<input name="consignee" type="text" placeholder="请输入姓名" required="required">
						</div>
						<div class="mui-input-row">
							<label>预约人电话：</label>
							<input name="tel"  type="tel" placeholder="请输入收货人电话" required="required">
						</div>
						<!--<div class="mui-input-row">
							<label>持卡人电话：</label>
							<input type="tel" placeholder="请输入持卡人电话">
						</div>-->

						<div class="mui-input-row">
							<label>提货日期：</label>
							<input name="appointmentDate" type="text" id='datetime-picker' placeholder="请填写日期" required="required"/>
						</div>

						<div class="mui-input-row">
							<label>备&emsp;&emsp;注：</label>
							<input name="descn"  type="text" placeholder="请输入备注信息">
						</div>

						<div class="mui-input-row">
							<label>验&ensp;证&ensp;码：</label>
							<input name="validateCode" class="code" type="text" placeholder="获取验证码"  required="required"/>
							<a href="javascript:void(0);" title="点击更换验证码">
								<img th:src="@{/captcha/captchaImage(type=char)}" class="imgcode yanzm"/>
							</a>
							<!--<img src="img/yanzm.jpg" class="yanzm">-->
						</div>
						<div class="mui-button-row" id="sureBtn">
							<button type="submit" class="mui-btn defaultStatus">提&emsp;&emsp;交</button>
						</div>
					</form>


				</div>
			</div>
		</div>

		<!--<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
		<script type="text/javascript" src="js/mui.min.js"></script>-->
		<!--<script type="text/javascript" src="lib/jquery-weui/dist/js/jquery-weui.js"></script>-->
		<th:block th:include="include :: wxfooter" />
		<script type="text/javascript" th:src="@{/lib/jquery-weui/dist/js/jquery-weui.js}" src="lib/jquery-weui/dist/js/jquery-weui.js"></script>
		<script type="text/javascript">
			// mui.init()
			//刷新验证码
			$('.imgcode').click(function() {
				var url = ctx + "captcha/captchaImage?type=char&s=" + Math.random();
				$(".imgcode").attr("src", url);
			});

            // 表单提交
			$("#dataForm").submit(function (form) {
				var data = $("#dataForm").serialize();
				$.ajax({
					type: "post",
					url: ctx + "/wx/json/addOrders",
					data: data,
					dataType: "json",
					success: function (data) {
						if (data.code==0) {
							 window.location.href = ctx + "/wx/index/ok/" + data.data.ordersId;
						} else {
							$('.imgcode').click();
							$(".code").val("");
							mui.alert(data.msg);
						}
					},
					error: function (error) {
						mui.alert("网络链接失败：" + error.status);
					}
				});
			});
			/*$("#sureBtn").click(function(event) {
				window.location.href = "ok.html"
			});*/

			$("#datetime-picker").datetimePicker();
		</script>
	</body>

</html>